<template>
  <a-modal
    :title="titleMap[mode]"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :destroyOnClose="true"
    @cancel="handleCancel"
    :maskClosable="false"
    width="60%">
    <div style="margin-top: 12px;">
      <!-- min-height: 300px;min-width: 650px -->
      <a-form-model ref="ruleAddForm" :model="addForm" :rules="addRules" >
        <a-form-model-item prop="fromRoleTypeId" :labelCol="labelCol" :wrapperCol="wrapperCol" label="从某角色类型">
          <!-- <a-select v-model="addForm.fromRoleTypeId"  placeholder="请选择从某角色类型">
                        <a-select-option v-for="i in fromData" :value="i.roleTypeId" :key="i.roleTypeId">{{ i.name

                        }}</a-select-option>
                    </a-select> -->
          <PaginationSelect @input="FromRole" ref="fromRole" placeholder="请选择从某角色类型">
          </PaginationSelect>
        </a-form-model-item>
        <a-form-model-item prop="toRoleTypeId" :labelCol="labelCol" :wrapperCol="wrapperCol" label="到某角色类型">
          <!-- <a-select v-model="addForm.toRoleTypeId"  placeholder="请选择到某角色类型">
                        <a-select-option v-for="i in fromData" :value="i.roleTypeId" :key="i.roleTypeId">{{ i.name

                        }}</a-select-option>
                    </a-select> -->
          <PaginationSelect @input="toRole" ref="toRole" placeholder="请选择到某角色类型">
          </PaginationSelect>
        </a-form-model-item>
        <a-form-model-item prop="name" :labelCol="labelCol" :wrapperCol="wrapperCol" label="当事人关系类型名称" >
          <a-input placeholder="请输入当事人关系类型名称" v-model="addForm.name" :max-length="40"/>
        </a-form-model-item>
        <a-form-model-item prop="description" :labelCol="labelCol" :wrapperCol="wrapperCol" label="描述信息">
          <a-input placeholder="请输入描述信息" v-model="addForm.description" />
        </a-form-model-item>
      </a-form-model>
    </div>
    <template slot="footer">
      <a-button key="back" @click="handleCancel">
        关闭
      </a-button>
      <a-button type="primary" :visible="visibleBtn" :loading="loadingBtn" @click="handleOk">
        保存
      </a-button>
    </template>
  </a-modal>
</template>
<script>
// import { addTenants, detailTenants } from '@/api/lessee'

import { getRoleTypes, addPartyTypes, detailPartyTypes } from '@/api/base'
import PaginationSelect from './PaginationSelect'
export default {
    components: { PaginationSelect },
    data () {
        return {
            addRules: {
                fromRoleTypeId: [
                    { required: true, message: '请选择从某角色类型!', trigger: 'change' }
                ],
                toRoleTypeId: [
                    { required: true, message: '请选择到某角色类型!', trigger: 'change' }
                ],
                name: [
                    { required: true, message: '请输入当事人关系类型名称!', trigger: 'blur' }
                ]
            },
            // 表单
            addForm: {
                fromRoleTypeId: undefined,
                toRoleTypeId: undefined,
                name: '',
                description: ''
            },
            labelCol: {
                xs: { span: 24 },
                sm: { span: 8 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 }
            },
            // wrapperCol: { span: 12 },
            // labelCol: { span: 11 },
            iconChooseVisible: false,
            itemStyle: 'float: left;width: 50%;min-width:300px',
            visible: false,
            confirmLoading: false,
            loading: false,
            visibleBtn: false,
            loadingBtn: false,
            mode: 'add',
            titleMap: {
                add: '新增',
                edit: '编辑'
            },
            rowData: '',
            fromQuery: {
                current: 1,
                pageSize: 10,
                description: '',
                name: ''
            },
            fromData: []
        }
    },
    mounted () {
        // this.fromSelect()

    },
    methods: {
        // fromPopupScroll(e) {
        //     const { target } = e;
        //     const { scrollTop, scrollHeight, clientHeight } = target;

        //     if (scrollTop + clientHeight == scrollHeight) {
        //         // 已经到达底部，触发分页逻辑
        //         // todo 这里就可以触发加载下一页请求  具体函数根据当前业务需求来定
        //         this.fromSelect();
        //     }
        // },
        // fromSelect() {
        //     console.log(this.fromQuery)
        //     getRoleTypes(this.fromQuery).then((res) => {
        //         console.log(res)
        //         if (res.code == 200) {
        //             let data=res.data.datas
        //             this.fromData=data
        //             // if (data.length === 0) {
        //             //     return
        //             // } else {
        //             //     this.fromData = this.fromData.concat(res.data.data)
        //             // }
        //         }
        //     })
        // },
        FromRole (val) {
            this.addForm.fromRoleTypeId = val
        },
        toRole (val) {
            this.addForm.toRoleTypeId = val
        },
        // 显示
        open (mode = 'add') {
            this.mode = mode
            this.visible = true
            return this
        },
        // 获取行数据和id
        setData (row) {
            this.rowData = row
            console.log(row)
            if (this.mode == 'edit') {
                detailPartyTypes(row.partyRelationshipTypeId).then(res => {
                    if (res.code == 200) {
                        this.addForm = res.data
                        this.addForm.fromRoleTypeId = Number(res.data.roleTypeIdValidFrom)
                        this.addForm.toRoleTypeId = Number(res.data.roleTypeIdValidTo)
                    }
                    console.log(res)
                })
            }
            console.log(row)
        },
        // 关闭
        handleCancel () {
            this.visible = false
            this.loadingBtn = false
            this.visibleBtn = false
            this.$emit('close')
        },
        // 确认
        handleOk () {
            this.loadingBtn = true
            this.visibleBtn = true
            this.$refs.ruleAddForm.validate(valid => {
                if (valid) {
                    addPartyTypes(this.addForm).then(res => {
                        console.log(res)
                        if (res.code === 200) {
                            this.$notification['success']({
                                message: '提示',
                                description: '保存成功！',
                                duration: 8
                            })
                        } else {
                            this.$notification['error']({
                                message: '提示',
                                description: res.message,
                                duration: 8
                            })
                        }
                        this.visibleBtn = false
                        this.visible = false
                        this.loadingBtn = false
                        this.$emit('success')
                    })
                } else {
                    this.loadingBtn = false
                    this.visibleBtn = false
                    return false
                }
            })
        }
    }
}
</script>
<style scoped lang="less" ></style>
